<template>
  <div class="container">
    <el-card>
      <!-- 头部面包屑部分 -->
      <template v-if="$route.query.name" #header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <!-- 头部搜索区域 -->
      <el-row type="flex">
        <el-col :span="18">
          <el-form :inline="true">
            <el-form-item label="标签名称">
              <el-input
                v-model="tagsRequest.tagName"
                style="width:190px"
                placeholder="请输入目录名称"
              />
            </el-form-item>
            <el-form-item
              label="状态"
              style="margin-left:20px"
            >
              <el-select v-model="tagsRequest.state" style="width:190px">
                <el-option value="1" label="启用" />
                <el-option value="2" label="禁用" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="clean"
              >清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="search"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button v-if="$route.query.id" type="text" @click="$router.back()">
              返回学科
            </el-button>
            <el-button
              icon="el-icon-edit"
              size="small"
              type="success"
              @click="showDialog()"
            >新增标签</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 警示框提示区域 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 主体表格区域 -->
      <el-table
        :data="tagsList"
        border
        style="width: 100%;margin-top:20px"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexFn"
          width="100"
        />
        <el-table-column
          align="center"
          prop="subjectName"
          label="所属学科"
          width="180"
        />
        <el-table-column
          align="center"
          prop="tagName"
          label="标签名称"
          width="180"
        />
        <el-table-column
          align="center"
          prop="creatorID"
          label="创建者"
          width="180"
        >
          <template v-slot="{row}">
            {{ role.find(item=>+item.id===row.creatorID).value }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="addDate"
          label="创建日期"
          width="300"
        >
          <template v-slot="{row}">
            {{ row.addDate|time }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          label="状态"
          width="180"
        >
          <template v-slot="{row}">
            {{ row.state===1?'启用':'禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template v-slot="{row}">
            <el-button type="text" @click="changeState(row)">{{ row.state === 1?'禁用':'启用' }}</el-button>
            <el-button type="text" :disabled="row.state===1" @click="showDialog(row)">修改</el-button>
            <el-button type="text" :disabled="row.state===1" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="tagsRequest.page"
          :page-sizes="[5,10,20,30,40]"
          :page-size="tagsRequest.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <TagsDialog ref="TagsAdd" :data-info="dataInfo" @getTagsList="getTagsList" />
  </div>
</template>

<script>
import { changeState, list, remove } from '@/api/hmmm/tags'
import baseApi from '@/api/base/baseApi'
import TagsDialog from '@/module-hmmm/components/tags-add.vue'
export default {
  components: {
    TagsDialog
  },
  data() {
    return {
      tagsList: [],
      tagsRequest: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: '',
        state: null
      },
      total: 0, // 总条目数
      role: baseApi.role, // 创建人员的枚举
      dataInfo: {}// 点击修改的当条信息
    }
  },
  watch: {
    '$route.query': () => {
      this.getTagsList()
    }
  },
  created() {
    this.getTagsList()
  },
  methods: {
    // 获取标签数据
    async getTagsList() {
      this.tagsRequest.subjectID = this.$route.query.id || null
      const { data } = await list(this.tagsRequest)
      // console.log(data)
      this.tagsList = data.items
      this.total = data.counts
    },
    // 切换每页条目数的事件
    handleSizeChange(pagesize) {
      // BUG修复，输入框输入内容不搜索，换页及切条数时，没有数据
      this.tagsRequest.tagName = ''
      this.tagsRequest.pagesize = pagesize
      this.getTagsList()
    },
    // 切换页码数跳转的事件
    handleCurrentChange(page) {
      this.tagsRequest.tagName = ''
      this.tagsRequest.page = page
      this.getTagsList()
    },
    // 自定义序号
    indexFn(index) {
      return (this.tagsRequest.page - 1) * this.tagsRequest.pagesize + index + 1
    },
    // 搜索功能
    search() {
      this.getTagsList()
    },
    // 切换状态
    async changeState(row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? '0' : '1'
      })
      this.getTagsList()
    },
    async showDialog(row = {}) {
      this.dataInfo = row
      await this.$nextTick()
      this.$refs.TagsAdd.showDialog()
      // this.$refs.TagsAdd.tagsInfo = { ...row }
    },
    // 删除功能
    async del(id) {
      try {
        await this.$confirm('你确认要删除这个标签吗？', '温馨提示', {
          type: 'warning'
        })
      } catch {
        return
      }
      await remove({
        id
      })
      this.$message.success('删除成功')
      this.getTagsList()
    },
    // 清除状态和标签名称
    clean() {
      this.tagsRequest = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: '',
        state: null
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 20px;
}
</style>
